<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/Home' }">商品管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/goods' }">商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="main">
      <div class="displays">
        <el-input
          clearable
          class="el-input"
          v-model.trim="params.query"
          placeholder="请输入内容"
          @clear="getSearchUsers"
          @blur="getSearchUsers"
          @keydown.native.enter="getSearchUsers"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="getSearchUsers"
          ></el-button>
        </el-input>
        <el-row>
          <el-button type="primary" @click="tianzhuan">添加用户</el-button
          >
        </el-row>
      </div>
      <template>
        <el-table :data="tableData" border style="width: 100%; margin: 20px 0">
          <el-table-column prop="goods_id" label="#" width="60">
          </el-table-column>
          <el-table-column prop="goods_name" label="商品名称"> </el-table-column>
          <el-table-column prop="goods_price" label="商品价格（元）" width="130">
          </el-table-column>
          <el-table-column prop="goods_weight" label="商品重量" width="140">
          </el-table-column>

          <el-table-column prop="upd_time" label="创建时间" width="180">
            <template slot-scope="scope">
              {{scope.row.upd_time| hanler}}
            </template>
          </el-table-column>
          <el-table-column prop="" label="操作" width="160">
            <template slot-scope="">
              <el-button type="success">
                <i class="el-icon-edit"></i>
              </el-button>
              <el-button type="danger">
                <i class="el-icon-delete-solid"></i
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页 -->
      <template>
        <div class="block">
          <!--size-change   当 pageSize 改变时会触发 -->
          <!-- current-change 当	currentPage 改变时会触发 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.pagenum"
            :page-sizes="[1, 2, 5, 10, 20]"
            :page-size="params.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalpage"
          >
          </el-pagination>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { GoodData } from "../../api/index";
export default {
  name: "",
  data() {
    return {
      
      tableData: [],
      totalpage: 0, //总条目数
      // users: 0,
      params: {
        pagenum:1, //页码
        pagesize: 5 //数据条数
      },
      dialogFormVisible: false, //显示隐藏添加用户按钮
      // validateMobile :false,
      form: {
        username: "",
        password: "",
        email: "",
        mobile: "",
      },
      

      //验证规则
      rules: {
        // username: [
        //   { required: true, message: "请输入用户名称", trigger: "blur" },
        // ],
        // password: [
        //   { required: true, message: "请输入用户密码", trigger: "blur" },
        // ],
        // email: [{ required: true, message: "请输入用户邮箱", trigger: "blur" }],
        // mobile: [
        //   { validator: validateMobile, trigger: "blur", required: true },
        // ],
      },
    };
  },
  created() {
    this.getGood()
  },
  methods: {
   async getGood(){
     let obj = {
       pagenum:this.params.pagenum,
       pagesize:this.params.pagesize
     }
      let {data:{goods,pagenum,total},meta:{msg,status}} = await GoodData(obj);
        if(status == 200){
        this.tableData = goods;
        this.totalpage = total;
        }
    },
    tianzhuan(){
      this.$router.push({path:"add"})
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.params.pagesize = val;
      this.getGood()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.pagenum = val;
      this.getGood()

    },
    //搜索功能
    getSearchUsers() {},
  },
};
</script>

<style scoped lang='css'>
.el-breadcrumb {
  background-color: #eaedf1;
}
.displays {
  display: flex;
}
.el-input {
  width: 450px;
  margin-right: 15px;
}
.main {
  padding: 25px;
  background-color: #fff;
  height: auto;
}
.block {
  display: flex;
}
el-form-item {
  width: 100px;
}
.formuser {
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  height: 200px;
}
.span {
  display: flex;
}
.el-select {
  display: flex;
  width: 200px;
}
.el-breadcrumb {
  padding-left: 0;
}
</style>